<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /*
            使用字面量创建数组
          */

        var arr = [];
        var arr1 = [1, 2, 3, 4];

        // 二维数组
        var arr2 = [
            [1, 2, 3],
            [4, 5, 6],
            [7, 8, 9]
        ]
        console.log(arr2);
        // push：数组末尾添加一个或多个元素，返回当前长度值
        arr.push(12, 45, 66, 99)
        console.log(arr);
        // pop : 删除数组末尾元素 , 返回被删除的元素
        arr.pop();
        console.log(arr);
        // unshift：数组开头添加一个或多个元素，返回当前长度值
        arr.unshift(1, 2, 3)
        console.log(arr);
        // shift : 删除数组开头第一个元素 , 返回被删除的元素
        arr.shift();
        console.log(arr);

        // 数组的遍历
        for (let index = 0; index < arr.length; index++) {
            const element = arr[index];
            console.log(element);
        }
        /*   
        forEach : 传一个回调函数作为参数，数组中元素有多少个，回调函数就执行多少次, 
         同时浏览器会将每次遍历的元素作为实参传入
         element：当前元素
         index：索引
         obj: 遍历的数组


         只支持IE8以上浏览器  ，如果要兼容，使用for循环遍历
         */
        arr.forEach((element, index, obj) => {
            console.log(element, index, obj);
        });

        // slice 不影响原数组
        var arr3 = ["武汉", "深圳", "北京", "上海", "天津"];
        console.log(arr3.slice(0, 2)); // 包含开始索引，不包含结束索引
        console.log(arr3);
        console.log(arr3.slice(1)); // 从开始索引，截取往后所有的值

        // splice：第一个参数是开始索引， 第二个参数是删除数量 , 第三个参数是替换到删除的元素位置
        var arr4 = ["武汉1", "深圳1", "北京1", "上海1", "天津1"];
        arr4.splice(1, 2, '替换元素')
        console.log(arr4);
    </script>
</body>

</html>